<template>
	<el-form ref="form" :rules="rules" :model="form" label-width="100px" @submit.prevent="onSubmit" style="margin:20px;min-width:600px;">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="基本信息" name="first">
				<el-form-item label="主账户名"  prop="merch_id">
					<el-select v-model="form.merch_id" filterable placeholder="请选择" style="width: 50%">
						<el-option v-for="item in merch" :key="item.id" :label="item.username" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="门店名称" prop="name">
					<el-col :span="12">
						<el-input v-model="form.name"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="门店logo" prop="logo">
					<uploadImg  @choiceImg="choiceImg" v-bind:imgs="form.logo"></uploadImg>
				</el-form-item>
				<el-form-item label="省市区">
					<el-cascader :options="options" v-model="selectedOptions" :separator="' '" filterable clearable placeholder="可输入地名搜索" size="medium" style="width:300px;" @change="changePCA">
					</el-cascader>
				</el-form-item>
				<el-form-item label="门店位置">
					<el-row :gutter="10">
						<el-col :span="6">
							<el-input v-model="form.lat"></el-input>
						</el-col>
						<el-col :span="6">
							<el-input v-model="form.lng"></el-input>
						</el-col>
						<el-col :span="4">
							<selectAddress @choiceaddress="choiceaddress"></selectAddress>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item label="门店地址" prop="address">
					<el-col :span="12">
						<el-input v-model="form.address"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="营业时间">
					<el-col :span="12">
						<el-input v-model="form.business_hours"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="门店简介">
					<el-col :span="12">
						<el-input type="textarea" v-model="form.description"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="联系人" prop="contact">
					<el-col :span="12">
						<el-input v-model="form.contact"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="联系电话" prop="phone">
					<el-col :span="12">
						<el-input v-model="form.phone"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="门店编号">
					<el-col :span="12">
						<el-input v-model="form.number"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="状态">
					<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
			</el-tab-pane>
			<el-tab-pane label="支付参数" name="second">
				<el-form-item label="商户号(mid)" label-width="150px">
					<el-col :span="12">
						<el-input v-model="form.merchant_no"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="终端号(tid)" label-width="150px">
					<el-col :span="12">
						<el-input v-model="form.terminal_no"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="机构商户号(instMid)" label-width="150px">
					<el-col :span="12">
						<el-input v-model="form.institution_no"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="消息来源(msgSrc)"  label-width="150px">
					<el-col :span="12">
						<el-input v-model="form.msg_src"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="来源编号(msgSrcId)" label-width="150px">
					<el-col :span="12">
						<el-input v-model="form.msg_src_id"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="支付秘钥" label-width="150px">
					<el-col :span="12">
						<el-input v-model="form.payment_key"></el-input>
					</el-col>
				</el-form-item>
			</el-tab-pane>
		</el-tabs>

		<el-form-item>
			<el-button type="primary" @click="submitForm('form')" :loading="addLoading">保存商户</el-button>
			<el-button @click.native.prevent>取消</el-button>
			<el-button @click="resetForm('form')">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import { addgoods } from '../../api/api';
	import util from '../../common/js/util';
	import selectAddress from '@/components/selectAddress';
	import uploadImg from '@/components/uploadImg';
	import options from "../../common/js/country-level3-data.js"
	export default {
		data() {
			return {
				activeName: 'first',
				presell_time: [],
				auto_time:[],
				value3: [],
				options: options, //存放城市数据
				addLoading: false,
				form: {
					merch_id:"",
					displayorder:"",
					name:"",
					logo:"",
					contact:"",
					phone:"",
					description:"",
					address:"",
					lat:"",
					lng:"",
					merchant_no:"",
					terminal_no:"",
					institution_no:"",
					msg_src:"",
					msg_src_id:"",
					payment_key:"",
					status:"",
					business_hours:"",
					province:"",
					city:"",
					area:"",
					number: ''
				},
				merch: [],
				selectedOptions:'',
				rules: {
					merch_id:[{ required: true, message: '请选择商户', trigger: 'blur' }],
					name:[{ required: true, message: '请输入门店名称', trigger: 'blur' }],
					logo:[{ required: true, message: '请选择门店LOGO', trigger: 'blur' }],
					address:[{ required: true, message: '请输入门店地址', trigger: 'blur' }],
				},
				value: ''
			}
		},
		computed: {
		},
		methods: {
			// 获取默认城市/品牌等下拉选择信息
			getDefault(storeid){
				let params = {
					length:10000
				};
				this.$axios.get("/admin/store/find",{params: {id:storeid}})
				.then(res => {
					this.form = res.data.data.store;
					this.selectedOptions=[this.form.province,this.form.city,this.form.area];
				})
				this.$axios.get("/admin/merch/list",{params})
				.then(res => {
					this.merch = res.data.data.merch;
				})
				.catch(err => {
					console.log(err)
				});
			},
			// 提交表单
			submitForm(formName) {
				// console.log(this.selectedOptions)
				this.form.province = this.selectedOptions[0] || '';
				this.form.city = this.selectedOptions[1] || '';
				this.form.area = this.selectedOptions[2] || '';
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.form.logo);
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let me=this;
							let params= this.form;
							console.log(this.selectedOptions);
							console.log(this.form);
							this.$axios.post("/admin/store/edit",params)
							.then(res=>{
								this.$message({
									type: 'success',
									message: '成功!'
								});
								this.addLoading = false;
								this.$router.push({path: '/store'})
							})
							.catch(function(err){
								me.$message.error(err.response.data.message);
								me.addLoading = false;
							  // console.log(err.response)
							});
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 选择省市区
			changePCA(val) {
				console.log(val)
				this.selectedOptions = val
			},
			handleClick(tab, event) {
				// console.log(tab, event);
			},
			// 选择用户
			choiceImg(img) {
				this.form.logo = img;
			},
			choiceaddress(p) {
				this.form.lat = p.lat;
				this.form.lng = p.lng;
				// console.log(p);
			},
			// 重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}

		},
		components: {
			selectAddress,uploadImg
		},
		mounted() {
			let storeid =this.$route.params.id;
			this.getDefault(storeid);
		}
	}
</script>

<style scoped lang="scss">
	@import '~scss_vars';

	.subinfo {
		font-size: 12px;
		color: $font-color-light;
	}

	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 178px;
		height: 178px;
	}

	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
